<template>
  <div id='home'>
    <app-header ref="handleHeander" @click="autoBetDetialShow=false"></app-header>
    <marquee @click="autoBetDetialShow=false"></marquee>
    <van-notice-bar
      :left-icon='leftIcon' v-if='noticeInfo' @click="autoBetDetialShow=false">
      {{noticeInfo}}
    </van-notice-bar>
    <div v-if="swipeList.length>0" v-show="swipe_data" class="swipe_banner" @click="autoBetDetialShow=false">
      <b class="close" @click="swipe_data=false">X</b>
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item :key="index" v-for="(item,index) in swipeList">
          <!--<a :href="item.fact">-->
          <img style="width: 100%;height: 100%;" :src="item.image" alt="" @click="handleJump(item.jumpType,item.fact)">
          <!--</a>-->
        </van-swipe-item>
      </van-swipe>
    </div>
    <!--老虎机-->
    <div class="one_arm_bandit">
      <div class="game_top_box" @click="autoBetDetialShow=false">
        <div @click="checkClick(item,index)" class="game_top_item"
             :class="index===oActive?'active':''" :key="index"
             v-for="(item,index) in nameList"
        >
          <p>{{item.number}}</p>
          <p>TRX/{{indexInfo.bet}}</p>
        </div>
      </div>
      <div class="game_box_list" @click="autoBetDetialShow=false">
        <!--中奖的金币gif-->
        <div v-if="win_flag===1" class="wins_box">
          <span class="span_left"></span>
          <span class="span_center"></span>
          <span class="span_right"></span>
        </div>
        <!--中奖之后win效果-->
        <div v-if="win_flag===2" class="win_win">
          <span>Win</span>
        </div>
        <div v-if="win_flag===3" class="win_no">
          <img src="../assets/img/game/nowin.jpg" alt="">
        </div>
        <!--老虎机默认显示-->
        <div class="center_img">
          <img :src="indexInfo.slot" alt="">
        </div>
        <ul>
          <li v-for="(list,item) in gameList.gameImg" :key="item" :class="index===item?'active':''">
            <img v-if="item!==3" :src="list.url" alt="">
            <img v-if="item===3&&indexInfo" :src="indexInfo.again" alt="">
          </li>
        </ul>
      </div>
      <div class="operation_box">
        <div class="operation">
          <div v-for="(item,index) in gameList.gameBottom" :key="index" class="operation_item"  @click="autoBetDetialShow=false">
            <span class="operation_span">{{item.text}}</span>
            <img @click="operation(item,index)" :src="item.url" alt="">
          </div>
        </div>
        <div class="bet">
          <div :class="language.lang==='Chinese'?'autoBetDetial':'enAutoBetDetial'" v-if="autoBetInfo" v-show="autoBetDetialShow" @click.stop="autoBetDetialShow=true">
          </div>
          <div class="auto">
            <img src="../assets/img/game/auto_off.png" v-if="!autoStatus" @click="autoBet(true)">
            <img src="../assets/img/game/auto_on.png" v-if="autoStatus" @click="autoBet(false)">
            <span @click="autoBetDetialShow=false">AUTO</span>
            <img src="../assets/img/game/detial.png" @click="autoBetDetialShow=!autoBetDetialShow">
          </div>
          <div class="btn" @click="autoBetDetialShow=false">
            <div @click="gameStart" :class="click?'active':'btn_start'" v-if="indexInfo">{{indexInfo.start}}</div>
            <!--<div @click="gameStart" :class="!click?'active':'btn_start'" v-if="indexInfo">Rolling</div>-->
            <!--<div v-if="!click&&indexInfo" @click="handleStart" class="btn_start">{{indexInfo.start}}</div>-->
            <!--<div v-if="click&&indexInfo" class="btn_start">{{indexInfo.end}}</div>-->
            <div @click="refresh" class="reset"></div>
          </div>
        </div>
        <!--<div @click="gameStart" :class="click?'active':'btn_start'" v-if="indexInfo">{{indexInfo.start}}</div>-->
        <!--<div @click="refresh" class="refresh iconfont">&#xe638;</div>-->
      </div>
    </div>
    <div class='game_box' @click="autoBetDetialShow=false">
      <ol v-for="(list,index) in listData" :key="index">
        <li class='flex_between li_status'>
          <span>{{list.name}}/第{{list.version}}期
          <i v-if="!list.touzhuValid">（进行中）</i>
          <i v-else>（已开奖）</i>
          </span>
          <span @click="handleBettingrecord(list.id,list.touzhuValid)">投注记录</span>
        </li>
        <li class='cuzi_Number'>
          <p class='flex_between'><span>投注进度</span><span><b>{{list.currentTotal}}</b>/{{list.maxTotal}}</span></p>
          <div class='progress'><span :style="{'width':list.currentTotal/list.maxTotal*100+'%'}"></span></div>
          <div class='flex_input'>
            <i>投注数量</i>
            <div class='flex_between input_box'>
              <div class='input_div'>
                <input type='text' :value="list.minAmount" @change="handleChange($event,index)">
                <span>{{list.danWei}}</span>
              </div>
              <div class='input_checkNumber'>
                <i class='iconfont' @click="handleDelete(index)">&#xe608;</i>
                <i class='iconfont' @click="handleAdd(index)">&#xe641;</i>
              </div>
            </div>
          </div>
          <div v-if="!list.touzhuValid" class='btn' @click="handleBetting(index)">
            投注
          </div>
          <div class='btn over' v-if="list.touzhuValid">
            距离下期开始还剩：{{list.backTime}}
          </div>
        </li>
      </ol>
    </div>
    <h3 id="gameplayintroduced" v-if="indexInfo" @click="autoBetDetialShow=false">{{indexInfo.gameintroduced.title}}</h3>
    <div class='video' v-if="indexInfo" @click="autoBetDetialShow=false">
      <video width='' height='' controls='controls' id='video'>
        <source src='http://slotmachines.oss-cn-beijing.aliyuncs.com/vedio/vedio.mp4' type='video/mp4'>
      </video>
      <p>{{indexInfo.gameintroduced.dec1}}</p>
      <p>{{indexInfo.gameintroduced.dec2}}</p>
    </div>
    <div class="ranking-list" v-if="indexInfo&&indexInfo.ranking" @click="autoBetDetialShow=false">
      <div class="title">{{indexInfo.ranking.leaderboard}}</div>
      <ul>
        <li>
          <span class="trophy">{{indexInfo.ranking.ranking}}</span>
          <span class="item">{{indexInfo.ranking.player}}</span>
          <span class="amount">{{indexInfo.ranking.totalaward}}</span>
        </li>
        <li v-if="slotData.value&&slotData.value.length>0" v-for="(item,index) in slotData.value" :key="index">
          <!--<span>01</span>-->
          <span class="trophy" v-if="index==0"><img src="../assets/img/trophy1.png" alt=""></span>
          <span class="trophy" v-if="index==1"><img src="../assets/img/trophy2.png" alt=""></span>
          <span class="trophy" v-if="index==2"><img src="../assets/img/trophy3.png" alt=""></span>
          <span class="trophy" v-if="index>2">{{index+1 | tuDou}}</span>
          <span class="item" :title="item.playerAddress">{{item.playerAddress}}</span>
          <span class="amount" :title="item.rewardAmount">{{item.rewardAmount}} TRX</span>
        </li>
      </ul>
    </div>
    <div class="betting-record" v-if="indexInfo&&indexInfo.record" @click="autoBetDetialShow=false">
      <div class="record-title">
        <div :class="userType!==1?'div_center active':''" v-if="userType!==1">
          <span @click="handleRecord(1)"> {{indexInfo.record.allbets}}</span>
        </div>
        <div :class="currentRecord===1?'active':''" v-if="userType===1">
          <span @click="handleRecord(1)"> {{indexInfo.record.allbets}}</span>
        </div>
        <div :class="currentRecord===2?'active':''" v-if="userType===1">
          <span @click="handleRecord(2)"> {{indexInfo.record.mybet}}</span>
        </div>
      </div>
      <ul class="record-list" v-if="currentRecord===1">
        <li class="record-list-title">
          <div>
            <span>{{indexInfo.record.player}}</span>
            <span>{{indexInfo.record.betamount}}</span>
            <span>{{indexInfo.record.winningresult}}</span>
            <span>{{indexInfo.record.winningamount}}</span>
          </div>
        </li>
        <li v-if="recordList.value&&recordList.value.length>0" v-for="(list,index) in recordList.value"
            :class="list.output!=='N'?'active':''" :key="index">
          <div>
            <span>{{list.playerAddress}}</span>
            <span>{{list.inputAmount}} TRX</span>
            <span><img :src="list.output |checkSrc" alt=""><i> {{list.output |checkNumber}}</i></span>
            <span>{{list.rewardAmount}} TRX</span>
          </div>
        </li>
        <div class="beet-page">
          <van-pagination
            v-if="recordList.totalCount&&recordList.totalCount>recordList.pageSize"
            class="page_list"
            prev-text="<"
            next-text=">"
            v-model="recordList.pageNum"
            :total-items="recordList.totalCount"
            :items-per-page="recordList.pageSize"
            @change="handlerecordSizeChange"
            force-ellipses
          />
        </div>
      </ul>
      <ul class="record-list" v-if="currentRecord===2">
        <li class="record-list-title">
          <div>
            <span>{{indexInfo.record.player}}</span>
            <span>{{indexInfo.record.betamount}}</span>
            <span>{{indexInfo.record.winningresult}}</span>
            <span>{{indexInfo.record.winningamount}}</span>
          </div>
        </li>
        <li v-if="mybetList.value&&mybetList.value.length>0" v-for="(list,index) in mybetList.value"
            :class="list.output!=='N'?'active':''" :key="index">
          <div>
            <span>{{list.playerAddress}}</span>
            <span>{{list.inputAmount}} TRX</span>
            <span><img :src="list.output |checkSrc" alt=""><i>{{list.output |checkNumber}}</i></span>
            <span>{{list.rewardAmount}} TRX</span>
          </div>
        </li>
        <div class="beet-page">
          <van-pagination
            v-if="mybetList.totalCount&&mybetList.totalCount>mybetList.pageSize"
            class="page_list"
            prev-text="<"
            next-text=">"
            v-model="mybetList.pageNum"
            :total-items="mybetList.totalCount"
            :items-per-page="mybetList.pageSize"
            @change="handleMybetCurrentChange"
            force-ellipses
          />
        </div>
      </ul>
    </div>

    <!--<div class="table-list">-->
    <!--<ol class="table-header">-->
    <!--<li>游戏场次</li>-->
    <!--<li>中奖人</li>-->
    <!--<li>中奖时间</li>-->
    <!--</ol>-->
    <!--<ul class="table-body">-->
    <!--<li v-if="awardList&&awardList.value.list.length>0" v-for="(list,index) in awardList.value.list" :key="index">-->
    <!--<span @click="handleBettingrecord(list.id,false)" class="active">{{list.award}}</span>-->
    <!--<span>{{list.userName}}</span>-->
    <!--<span>{{list.createTime}}</span>-->
    <!--</li>-->
    <!--<p class="no-data" v-if="!awardList||awardList.value.list.length<1">暂无数据</p>-->
    <!--</ul>-->
    <!--<van-pagination-->
    <!--v-if="awardList.totalCount&&awardList.totalCount>awardList.pageSize"-->
    <!--class="page_list"-->
    <!--prev-text="<"-->
    <!--next-text=">"-->
    <!--v-model="awardList.pageNum"-->
    <!--:total-items="awardList.totalCount"-->
    <!--:items-per-page="awardList.pageSize"-->
    <!--@change="getPage"-->
    <!--force-ellipses-->
    <!--/>-->
    <!--</div>-->
    <!--加速-->
    <audio :loop="loopFlag" :src="audio" ref="myAudio" controls="controls" hidden preload id="audios"/>
    <!--<audio hidden :loop="loopFlag" src="http://m10.music.126.net/20190102200949/fe367e50cbb2a50186fb0e8fae727638/ymusic/d60e/d53a/a031/1578f4093912b3c1f41a0bfd6c10115d.mp3" ref="myAudio" controls="controls"  preload id="audios"/>-->
  </div>
</template>

<script>
  import {Toast} from 'vant'
  import Header from '@/components/component/header.vue'
  import TableList from '@/components/component/table_list.vue'
  import Marquee from '@/components/component/marquee.vue'
  import Api from '@/axios'
  import {mapGetters} from 'vuex'

  export default {
    name: 'home',
    data() {
      return {
        isWin: false, // 判断用户是否中奖
        win_flag: 0, // 默认中间显示啥
        swipe_data: true,
        tronWeb: null, // 插件对象
        loopFlag: true, // 循环播放
        audio: 'http://slotmachines.oss-cn-beijing.aliyuncs.com/vedio/jiasu.mp3',
        nameList: [
          {name: 'TRX/注', number: 10},
          {name: 'TRX/注', number: 100},
          {name: 'TRX/注', number: 1000}
        ],
        oActive: 0, // 倍数值默认选中
        activeNumber: 10, // 倍数值
        leftIcon: require('../assets/img/notice.png'),
        noticeInfo: '', // 跑马灯
        listData: [],
        awardList: {
          totalCount: null, // 总条数
          pageNum: 1, // 当前显示页号
          pageSize: 10, // 每页显示数据条数
          value: {
            nav: [
              {name: '游戏场次'},
              {name: '中奖人'},
              {name: '中奖时间'}
            ],
            list: [],
            attr: [
              'award',
              'userName',
              'createTime'
            ]
          }
        },
        gameList: { // 老虎机数据
          gameImg: [
            {url: require('../assets/img/game/game1.png'), text: '', msg: 'P', number: 2},
            {url: require('../assets/img/game/game2.png'), text: '', msg: 'C', number: 2},
            {url: require('../assets/img/game/game3.png'), text: '', msg: 'A', number: 4},
            {url: require('../assets/img/game/agin.png'), text: '', msg: 'N', number: 1},
            {url: require('../assets/img/game/game4.png'), text: '', msg: 'W', number: 2},
            {url: require('../assets/img/game/game3.png'), text: '', msg: 'A', number: 4},
            {url: require('../assets/img/game/game5.png'), text: '', msg: 'B', number: 1},
            {url: require('../assets/img/game/game1.png'), text: '', msg: 'P', number: 2},
            {url: require('../assets/img/game/game3.png'), text: '', msg: 'A', number: 4},
            {url: require('../assets/img/game/game4.png'), text: '', msg: 'W', number: 2},
            {url: require('../assets/img/game/game2.png'), text: '', msg: 'C', number: 2},
            {url: require('../assets/img/game/game3.png'), text: '', msg: 'A', number: 4}
          ],
          gameBottom: [
            {url: require('../assets/img/game03.png'), text: 0, flag: false, msg: 'A'},
            {url: require('../assets/img/game04.png'), text: 0, flag: false, msg: 'W'},
            {url: require('../assets/img/game01.png'), text: 0, flag: false, msg: 'P'},
            {url: require('../assets/img/game05.png'), text: 0, flag: false, msg: 'B'},
            {url: require('../assets/img/game02.png'), text: 0, flag: false, msg: 'C'}
          ]
        },
        swipeList: [],
        click: false,
        index: -1, // 当前转动到哪个位置，起点位置
        count: 12, // 总共有多少个位置
        timer: null, // setTimeout的ID，用clearTimeout清除
        speed: 60, // 初始转动速度
        times: 0, // 转动次数
        cycle: 100, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
        prize: -1, // 中奖位置
        currentRecord: 1,
        slotData: {
          totalCount: null, // 总条数
          pageNum: 1,
          pageSize: 10,
          value: []
        },
        recordList: {
          totalCount: null, // 总条数
          pageNum: 1, // 当前显示页号
          pageSize: 10, // 每页显示数据条数
          value: []
        },
        mybetList: {
          totalCount: null, // 总条数
          pageNum: 1, // 当前显示页号
          pageSize: 10, // 每页显示数据条数
          value: []
        },
        resultsLottery: null,
        autoStatus: false,
        autoBetDetialShow: false
      }
    },
    components: {
      'app-header': Header,
      'app-tableList': TableList,
      'marquee': Marquee
    },
    computed: {
      ...mapGetters({
        userType: 'userType',
        userCode: 'userCodes',
        indexInfo: 'indexInfo',
        language: 'language',
        autoBetInfo: 'autoBetInfo'
      })
    },
    watch: {
      language() {
        Api.swipeList().then(res => {
          this.swipeList = res.data.data
          console.log(this.swipeList)
        })
        // this.getNoticebar()
        this.noticeInfo = ''
      }
    },
    methods: {
      getSlot() {
        let prama = {
          pageNum: this.slotData.pageNum,
          pageSize: this.slotData.pageSize
        }
        Api.querySlot(prama).then(res => {
          let result = res.data
          if (result.code === 0) {
            this.slotData.value = result.data.data
            this.slotData.totalCount = result.data.totalCount
          }
        })
      },
      getRecord() {
        let prama = {
          pageNum: this.recordList.pageNum,
          pageSize: this.recordList.pageSize
        }
        Api.queryRecord(prama).then(res => {
          let result = res.data
          if (result.code === 0) {
            this.recordList.value = result.data.data
            this.recordList.totalCount = result.data.totalCount
          }
        })
      },
      getMybetList() {
        if (!!window.tronWeb && window.tronWeb.ready) {
          let code = window.tronWeb.defaultAddress.base58
          let prama = {
            pageNum: this.mybetList.pageNum,
            pageSize: this.mybetList.pageSize,
            playerAddress: code
          }
          Api.queryRecord(prama).then(res => {
            let result = res.data
            if (result.code === 0) {
              this.mybetList.value = result.data.data
              this.mybetList.totalCount = result.data.totalCount
            }
          })
        }
      },
      handlerecordSizeChange(pageNumber) {
        this.recordList.pageNum = pageNumber
        this.getRecord()
      },
      handleMybetCurrentChange(pageNumber) {
        this.mybetList.pageNum = pageNumber
        this.getMybetList()
      },
      handleRecord(index) {
        if (index === 2) {
          this.getMybetList()
        } else {
          this.getRecord()
        }
        this.currentRecord = index
      },
      refresh() { // 清空数字为0
        this.gameList.gameBottom.forEach((v, i) => {
          v.text = 0
        })
      },
      checkClick(item, index) {
        this.oActive = index
        this.activeNumber = item.number
      },
      operation(item, index) {
        let vm = this
        vm.gameList.gameBottom[index].text = vm.gameList.gameBottom[index].text + vm.activeNumber
      },
      autoBet(status) {
        this.autoStatus = status
        this.autoBetDetialShow = false
      },
      getNoticebar() { // 跑马灯
        Api.getMessage().then(res => {
          this.noticeInfo = ''
          let result = res.data
          if (result.code === 0) {
            this.noticeInfo = result.data.message
          } else {
            this.$toast(result.message)
          }
        })
      },
      handleJump(type, index) {
        if (type === 1) {
          window.location.href = index
        } else {
          this.$router.push({
            // path: '/' + index
            path: '/notice'
          })
        }
      },
      // 加速
      handleAcceleration() {
        console.log('加速')
        let vm = this
        vm.audio = 'http://slotmachines.oss-cn-beijing.aliyuncs.com/vedio/jiasu.mp3'
        setTimeout(() => {
          vm.$refs.myAudio.play()
        }, 10)
      },
      handleDeceleration() { // 减速
        console.log('减速')
        let vm = this
        this.loopFlag = false
        vm.audio = 'http://slotmachines.oss-cn-beijing.aliyuncs.com/vedio/jiansu.mp3'
        clearTimeout(this.audioTimer)
        this.audioTimer = setTimeout(() => {
          vm.$refs.myAudio.play()
        }, 10)
      },
      handleUniform() { // 匀速
        console.log('匀速')
        let vm = this
        this.loopFlag = false
        vm.audio = 'http://slotmachines.oss-cn-beijing.aliyuncs.com/vedio/yunsu.mp3'
        clearTimeout(this.audioTimer)
        this.audioTimer = setTimeout(() => {
          vm.$refs.myAudio.play()
        }, 1000)
      },
      handleNotwinning() { // 未中奖
        let vm = this
        vm.audio = 'http://slotmachines.oss-cn-beijing.aliyuncs.com/vedio/weizhongjiang.mp3'
        setTimeout(() => {
          vm.$refs.myAudio.play()
        }, 100)
        if (this.autoStatus) {
          this.gameStart()
        }
      },
      handleFinalaward() { // 中奖
        let vm = this
        vm.audio = 'http://slotmachines.oss-cn-beijing.aliyuncs.com/vedio/zhongjiang.mp3'
        setTimeout(() => {
          vm.$refs.myAudio.play()
        }, 100)
        if (this.autoStatus) {
          this.gameStart()
        }
      },
      async gameStart() {
        if (this.userType === 0) { // 如果点击的时候没有安装插件
          return this.$refs.handleHeander.handleLogin()
        }
        if (this.userType === 2) { // 如果点击的时候插件没返回数据
          this.$toast('请刷新浏览器重新获得登录信息！')
        }
        let flag = this.gameList.gameBottom.some((e) => {
          return e.text > 0
        })
        if (!flag) {
          this.$toast('请增加游戏币种数量')
          return false
        }
        // 判断账户里面的金额是否可以触发这把游戏
        // if(){}
        let vm = this
        let code = vm.tronWeb.defaultAddress.base58
        await vm.tronWeb.trx.getUnconfirmedAccount(code).then(res => { // 拿到余额
          vm.balance = res.balance ? parseInt(res.balance / 1000000) : 0 // TRX
        })
        let totalAmount = 0
        let gameBottom = this.gameList.gameBottom
        for (let single of gameBottom) {
          totalAmount += Number(single.text)
        }
        if (vm.balance < totalAmount + 1) {
          this.autoStatus = false
          this.$toast('请增加账户余额！')
          return false
        }

        this.gameList.gameBottom.forEach((v, i) => {
          v.flag = false
        })
        if (this.click) {
          return false
        } else { // 真正的开始游戏
          console.log('开始游戏')
          this.win_win = false
          this.win_no = false
          this.win_flag = -1
          this.handleAcceleration()
          // this.handleUniform()
          this.moniData()
          this.speed = 100
          this.roll() // 转圈过程不响应click事件，会将click置为false
          this.indexInfo.start = 'Rolling'
          this.click = true // 一次抽奖完成后，设置click为true，可继续抽奖
          return false
        }
      },
      awardMining() { // 投注调用奖励挖矿接口
        let gameBottom = this.gameList.gameBottom
        let amount = 0
        gameBottom.forEach((v, i) => {
          amount += v.text
        })
        Api.awardMining({userAddress: this.userCode, amount: amount})
      },
      moniData() {
        let vm = this
        let gameBottom = this.gameList.gameBottom
        let params = []
        let totalAmount = 0
        for (let single of gameBottom) {
          params.push(single.text)
          totalAmount += Number(single.text)
        }
        console.info(params)
        let args = {
          callValue: totalAmount * 1000000,
          shouldPollResponse: false
        }

        const checkResult = async (times = 0, tId, date) => {
          if (times === 20) {
            vm.prize = 3
            vm.isWin = false
            vm.$toast(vm.indexInfo.errorMsg.overtime)
            return false
          }

          let output = null
          try {
            output = await this.tronWeb.getEventByTransactionID(tId)
            console.info(output)
          } catch (error) {
            console.info(error)
          }
          const now = new Date().getTime()

          if (!output || output.length === 0) {
            if (now - date > 30000) {
              vm.prize = 3
              vm.isWin = false
              vm.$toast(vm.indexInfo.errorMsg.overtime)
              return false
            } else {
              return setTimeout(() => {
                checkResult(times + 1, tId, date)
              }, 1000)
            }
          }

          let res = output[0].result._output
          console.log('结果', ':', res)
          let index = 3
          let isWin = false
          if (res === 'A') {
            index = 2
            if (params[0] !== 0) {
              isWin = true
            }
          }
          if (res === 'P') {
            index = 0
            if (params[2] !== 0) {
              isWin = true
            }
          }
          if (res === 'C') {
            index = 1
            if (params[4] !== 0) {
              isWin = true
            }
          }
          if (res === 'W') {
            index = 4
            if (params[1] !== 0) {
              isWin = true
            }
          }
          if (res === 'B') {
            index = 6
            if (params[3] !== 0) {
              isWin = true
            }
          }
          if (res === 'N') {
            index = 3
          }
          this.prize = index
          // 刷新用户余额，能量
          vm.$refs.handleHeander.freshUserInfo()
          let code = vm.tronWeb.defaultAddress.base58
          vm.tronWeb.trx.getUnconfirmedAccount(code).then(res => { // 拿到余额
            vm.balance = parseInt(res.balance / 1000000) // TRX
          })
          // 判断用户是否中奖
          vm.isWin = isWin
          console.log(vm.isWin)
          if (isWin) {
            // 中奖了提取余额
            console.log('winwinwin')
            // vm.winOk()
            await vm.contract.withdraw().send().then(res => {
              console.log('结果', ':', res)
              // 刷新用户余额，能量
            }).catch(err => console.log(err))
          }
          let refreshTimes = 0
          let refreshBalance = setInterval(function () {
            if (refreshTimes >= 3) {
              clearInterval(refreshBalance)
            }
            refreshTimes++
            vm.$refs.handleHeander.freshUserInfo()
            vm.tronWeb.trx.getUnconfirmedAccount(code).then(res => { // 拿到余额
              vm.balance = res.balance ? parseInt(res.balance / 1000000) : 0 // TRX
            })
            vm.getSlot()
          }, 1000)
        }
        vm.contract.buy(params).send(args).then(res => {
          checkResult(0, res, new Date().getTime())
        }).catch(err => {
            console.log('错误', ':', err)
            vm.prize = 3
          }
        )
      },
      lottery() {
        let index = this.index
        let count = this.count
        index += 1
        if (index > count - 1) {
          index = 0
        }
        this.index = index
        return false
      },
      roll() {
        this.times += 1
        this.lottery()
        console.log('this.prize.....', this.prize)
        if (this.times > this.cycle && this.prize === this.index) {
          clearTimeout(this.timer)
          console.log('结果index', ':', this.index)
          let isWin = this.isWin
          this.prize = -1
          this.times = 0
          this.endCycle = 0
          this.speed = 100
          this.times = 0
          this.indexInfo.start = 'Start'
          this.click = false
          if (!isWin) {
            this.handleNotwinning()
            this.noWin()
          } else {
            this.handleFinalaward()
            if (!this.autoStatus) {
              this.winOk()
            } else {
              this.win_flag = 2
            }
            this.isWin = false
          }
          this.getRecord()
          this.getMybetList()
          this.gameList.gameBottom.forEach((v, i) => {
            v.flag = true
          })
        } else {
          // else if (this.times === this.cycle) {
          //   this.moniData()}
          if (this.times < this.cycle) {
            this.handleAcceleration()
            this.speed -= 3
          } else {
            if (this.times > this.cycle + 10 && ((this.prize === 0 && this.index === 7) || this.prize === this.index + 1)) {
              this.speed += 80
            } else {
              this.speed += 20
              if (this.prize !== -1) {
                this.handleDeceleration()
              }
            }
          }
          if (this.speed > 110) {
            this.handleDeceleration()
            this.speed = 110
            this.times = 110
          }
          if (this.speed < 30) {
            this.handleUniform()
            this.speed = 30
          }
          this.timer = setTimeout(this.roll, this.speed) // 循环调用
        }
        return false
      },
      // 中奖图片控制
      // winningImage() { // win
      //   this.win = true
      //   clearTimeout(this.audioTimer)
      //   this.audioTimer = setTimeout(() => {
      //     this.loopFlag = true
      //     this.audio = 'http://slotmachines.oss-cn-beijing.aliyuncs.com/vedio/jiasu.mp3'
      //     this.win = false
      //     this.win_win = true
      //   }, 2200)
      // },
      losingLottery() { // win_no
        this.win_no = true
        clearTimeout(this.audioTimer)
        this.audioTimer = setTimeout(() => {
          this.loopFlag = true
          this.audio = 'http://slotmachines.oss-cn-beijing.aliyuncs.com/vedio/jiasu.mp3'
        }, 2200)
      },
      noWin() { // 没有中奖的操作
        this.handleNotwinning()
        this.win_flag = 3// 显示未中奖图片
      },
      winOk() { // 中奖的操作
        this.handleFinalaward()
        this.win_flag = 1 // 显示金币
        setTimeout(() => {
          this.win_flag = 2 // win
        }, 20)
      }
    },
    mounted() {
      this.getSlot()
      this.getRecord()
      this.getNoticebar()
      //  轮播图list
      Api.swipeList().then(res => {
        this.swipeList = res.data.data
        console.log(this.swipeList)
      })
      let vm = this
      let tries = 0
      const timer = setInterval(() => {
        if (tries >= 20) {
          clearInterval(timer)
          return
        }
        if (!window.tronWeb) { // 未装插件
          return tries++
        } else {
          vm.tronWeb = window.tronWeb
          let eventServer = new vm.tronWeb.providers.HttpProvider('http://h5.trongame.fun')
          eventServer.isConnected = () => eventServer.request('healthcheck').then(() => true).catch(() => (
            eventServer.request('events?size=1').then(data => (
              Array.isArray(data)
            ))
          )).catch(() => false)
          vm.tronWeb.eventServer = eventServer
          // vm.getMybetList()
          vm.tronWeb.on('addressChanged', () => {
            let code = vm.tronWeb.defaultAddress.base58
            vm.address = code
            vm.tronWeb.trx.getUnconfirmedAccount(code).then(res => { // 拿到余额
              vm.balance = res.balance ? parseInt(res.balance / 1000000) : 0 // TRX
            })
          })
          if (vm.tronWeb.ready) { // 正常的情况
            console.log('正常的情况')
            // 拿到用户地址
            let code = vm.tronWeb.defaultAddress.base58
            vm.address = code
            vm.tronWeb.trx.getUnconfirmedAccount(code).then(res => { // 拿到余额
              vm.balance = res.balance ? parseInt(res.balance / 1000000) : 0 // TRX
            })
            let setContract = async function (vm) {
              const address = 'TEsBGLXmMYFqFmNHNVLYwgANyvhVczzByp'
              let contractExist = true
              await vm.tronWeb.trx.getContract(address).then(res => console.info(res)).catch(error => {
                contractExist = false
                console.info(error)
              })
              if (contractExist) {
                vm.contract = await vm.tronWeb.contract().at(address)
                console.info(vm.contract)
              } else {
                this.$toast('请切换到正确的网络！')
              }
            }
            setContract(vm)
          } else { // 有插件未登录.
            return tries++
          }
          clearInterval(timer)
        }
      }, 2000)
    }
  }
</script>
<style lang='less'>
  #home {
    background: url("../assets/img/bg.png") no-repeat #020C47 0 144px;
    background-size: 100%;
    padding-bottom: 80px;
    width: 100%;
    height: auto;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    .van-swipe__indicators {
      bottom: 10px;
    }
    .swipe_banner {
      width: 100%;
      height: 100px;
      background: #f5f5f5;
      position: relative;
      .van-swipe {
        width: 100%;
        height: 100%;
      }
      .close {
        font-size: 20px;
        color: #fff;
        padding: 4px 15px;
        background: rgba(0, 0, 0, 0.5);
        position: absolute;
        right: 0;
        top: 0;
        z-index: 999;
      }
    }
    /*老虎机*/
    .one_arm_bandit {
      width: 690px;
      height: 864px;
      margin: 25px auto;
      background: url("../assets/img/game/game_bg.png") no-repeat;
      background-size: 100%;
      .game_box_list {
        width: 484px;
        height: 473px;
        margin: 80px 0 0 100px;
        position: relative;
        padding: 0;
        .wins_box {
          width: 100%;
          height: 100%;
          background: red;
          position: absolute;
          overflow: hidden;
          left: 0;
          top: 0;
          z-index: 99;
          background: url("../assets/img/game/win/win_bg.png") no-repeat;
          .span_left {
            width: 50px;
            height: 50px;
            display: block;
            background: url("../assets/img/game/win/win_left.png") no-repeat;
            background-size: 100% 100%;
            position: absolute;
            z-index: 100;
            left: 80px;
            top: 10px;
            animation: mymove1 1.2s ease-in-out infinite;
            &:after {
              content: '';
              width: 50px;
              height: 50px;
              position: absolute;
              background: url("../assets/img/game/win/win_left.png") no-repeat;
              background-size: 100% 100%;
              top: 140px;
              left: -20px;
              animation: mymove1 1.5s ease-in-out infinite !important;
            }
            &:before {
              content: '';
              width: 50px;
              height: 50px;
              position: absolute;
              background: url("../assets/img/game/win/win_left.png") no-repeat;
              background-size: 100% 100%;
              top: 270px;
              left: -50px;
              animation: mymove2 3s ease-in-out infinite !important;
            }
          }
          .span_center {
            width: 50px;
            height: 50px;
            display: block;
            background: url("../assets/img/game/win/win_center.png") no-repeat;
            background-size: 100% 100%;
            position: absolute;
            z-index: 100;
            left: 180px;
            top: 10px;
            animation: mymove1 2s ease-in-out infinite;
            &:after {
              content: '';
              width: 50px;
              height: 50px;
              position: absolute;
              background: url("../assets/img/game/win/win_center.png") no-repeat;
              background-size: 100% 100%;
              top: 140px;
              animation: mymove2 3s ease-in-out infinite !important;
            }
            &:before {
              content: '';
              width: 50px;
              height: 50px;
              position: absolute;
              background: url("../assets/img/game/win/win_center.png") no-repeat;
              background-size: 100% 100%;
              top: 270px;
              animation: mymove3 3s ease infinite !important;
            }
          }
          .span_right {
            width: 50px;
            height: 50px;
            display: block;
            background: url("../assets/img/game/win/win_right.png") no-repeat;
            background-size: 100% 100%;
            position: absolute;
            z-index: 100;
            right: 80px;
            top: 10px;
            animation: mymove1 3s ease-out infinite;
            &:after {
              content: '';
              width: 50px;
              height: 50px;
              position: absolute;
              background: url("../assets/img/game/win/win_right.png") no-repeat;
              background-size: 100% 100%;
              top: 140px;
              right: -20px;
              animation: mymove2 2s ease-in-out infinite !important;
            }
            &:before {
              content: '';
              width: 50px;
              height: 50px;
              position: absolute;
              background: url("../assets/img/game/win/win_right.png") no-repeat;
              background-size: 100% 100%;
              top: 270px;
              right: -50px;
              animation: mymove3 1.3s ease-in-out infinite !important;
            }
          }
        }
        ul {
          .active {
            background: url("../assets/img/game/active.png");
            background-size: 100% 100%;
            /*border: 8px solid red;*/
            border-radius: 20px;
            padding: 10px;
            box-sizing: border-box;
            > img {
              max-width: 100%;
              max-height: 100%;
            }
          }
          li {
            width: 100px;
            height: 100px;
            position: absolute;
            &:nth-child(1) {
              top: 16px;
              left: 16px;
            }
            &:nth-child(2) {
              top: 16px;
              left: 135px;
            }
            &:nth-child(3) {
              top: 16px;
              left: 253px;
            }
            &:nth-child(4) {
              top: 16px;
              right: 16px;
            }
            &:nth-child(5) {
              top: 130px;
              right: 16px;
            }
            &:nth-child(6) {
              top: 243px;
              right: 16px;
            }
            &:nth-child(7) {
              bottom: 16px;
              right: 16px;
            }
            &:nth-child(8) {
              bottom: 16px;
              left: 135px;
            }
            &:nth-child(9) {
              bottom: 16px;
              left: 253px;
            }
            &:nth-child(10) {
              bottom: 16px;
              left: 16px;
            }
            &:nth-child(11) {
              top: 243px;
              left: 16px;
            }
            &:nth-child(12) {
              top: 130px;
              left: 16px;
            }
          }
        }
      }
      .operation_box {
        display: flex;
        position: relative;
        .operation {
          width: 430px;
          height: 145px;
          padding: 43px 0 0 43px;
          justify-content: space-between;
          display: flex;
          .operation_item {
            width: 70px;
            height: 145px;
          }
          .operation_span {
            line-height: 26px;
            font-family: PingFangSC-Regular;
            font-size: 18px;
            color: #432217;
            display: block;
            text-align: center;
            background: #FEF2C1;
            border-radius: 4px;
            margin: 17px 0;
          }
        }
        .bet {
          width: 175px;
          height: 115px;
          margin-top: 36px;
          margin-left: 11px;
          overflow: visible;
          .autoBetDetial {
            z-index: 99;
            width: 529px;
            height: 418px;
            background: #FFFAE3;
            border-radius: 11px;
            position: absolute;
            top: -360px;
            left: 152px;
            flot: left;
            background: url("../assets/img/game/detialcn.png") center center no-repeat;
            background-size: 529px 418px;
          }
          .enAutoBetDetial {
            z-index: 99;
            width: 800px;
            height: 418px;
            background: #FFFAE3;
            border-radius: 11px;
            position: absolute;
            top: -360px;
            left: 152px;
            flot: left;
            background: url("../assets/img/game/detialen.png") center center no-repeat;
            background-size: 529px 418px;
          }
          .auto {
            margin-bottom: 21px;
            margin-top: 11px;
            width: 175px;
            height: 35px;
            >img {
              cursor: pointer;
              display: inline-block;
              &:first-child {
                margin-top: 9px;
                width: 61px;
                height: 31px;
                /*margin-right: 0px;*/
              }
              &:last-child {
                display: inline-block;
                margin-left: -2px;
                width: 24px;
                height: 24px;
                margin-bottom: 4px;
              }
            }
            >span {
              display: inline-block;
              height: 35px;
              margin-top: 16px;
              margin-left: -10px;
              /*margin-right: 6px;*/
              width: 60px;
              font-family: PingFangSC-Regular;
              font-size: 18px;
              color: #FFFFFF;
              line-height: 25px;
              text-align: center;
              vertical-align: top;
              /*word-break: break-word;*/
              /*margin: auto 0;*/
            }
          }
          .btn {
            height: 64px;
            .btn_start {
              /*position: absolute;*/
              margin-top: 2px;
              display: inline-block;
              width: 103px;
              height: 64px;
              background: #C74F4A;
              box-shadow: 2px 2px 2px 0 #8A1D18;
              border-radius: 10px;
              font-size: 16px;
              cursor: pointer;
              line-height: 64px;
              text-align: center;
              color: #fff;
              &:hover {
                opacity: .8;
              }
              &:active {
                top: 16px;
              }
            }
            .active {
              margin-top: 1px;
              display: inline-block;
              width: 103px;
              height: 64px;
              border-radius: 10px;
              background: #8A1D18;
              box-shadow: 2px 2px 2px 0 #8A1D18;
              font-size: 22px;
              cursor: pointer;
              line-height: 64px;
              text-align: center;
              color: #fff;
            }
            .reset {
              /*display: inline;*/
              margin-top: 37px;
              margin-right: 20px;
              float: right;
              width: 35px;
              height: 27px;
              background: url("../assets/img/game/reset_v2.png") center center no-repeat;
              background-size: 35px 27px;
              cursor: pointer;
              /*&:hover {*/
                /*opacity: .8;*/
              /*}*/
              /*&:active {*/
                /*margin-top: 49px;*/
              /*}*/
            }
          }
        }
      }
      .win_win {
        z-index: 9;
        position: absolute;
        width: 202px;
        height: 207px;
        top: 130px;
        left: 144px;
        background: #fdcd2b;
        border: 3px solid #FEF2C1;
        border-radius: 19px;
        > span {
          line-height: 207px;
          display: block;
          text-align: center;
          color: #fff;
          font-size: 33px;
        }
      }
      .win_no {
        position: absolute;
        width: 202px;
        height: 207px;
        top: 130px;
        left: 144px;
        background: #560E0B;
        border: 3px solid #FEF2C1;
        border-radius: 19px;
        z-index: 9;
        img {
          width: 100%;
          height: 100%;
          border-radius: 19px;
        }
      }
      .center_img {
        position: absolute;
        width: 202px;
        height: 207px;
        top: 130px;
        left: 144px;
        background: #560E0B;
        border: 3px solid #FEF2C1;
        border-radius: 19px;
        img {
          width: 80%;
          height: 80%;
          position: relative;
          top: 10%;
          left: 10%;
        }
      }
      .game_top_box {
        height: 60px;
        width: 100%;
        display: flex;
        justify-content: space-around;
        padding: 16px 0;
        .active {
          background: #862925 !important;
          p {
            color: #FEF2C1 !important;
          }
        }
        .game_top_item {
          width: 118px;
          padding-top: 5px;
          border-radius: 10px;
          background: #FEF2C1;
          p {
            font-size: 16px;
            color: #560E0B;
            text-align: center;
            line-height: 25px;
          }
        }
      }
    }
    .text_box {
      margin: 0 24px;
      background: #1E3054;
      padding: 27px 31px 10px 31px;
      span {
        font-size: 26px;
        font-size: 26px;
        color: #fff;
      }
      p {
        font-size: 26px;
        font-size: 26px;
        padding-bottom: 20px;
        text-align: justify;
      }
    }
    .video {
      width: 702px;
      min-height: 380px;
      margin: 0 auto;
      padding-bottom: 24px;
      margin-bottom: 24px;
      background: #1D1774;
      video {
        max-width: 92%;
        padding: 0 4%;
      }
      > p {
        font-size: 24px;
        color: #FFFFFF;
        text-align: justify;
        padding: 0 4%;
      }
    }
    > h6 {
      font-size: 26px;
      line-height: 40px;
      color: #fff;
      text-align: center;
    }
    > h3 {
      font-size: 32px;
      color: #FFFFFF;
      text-align: center;
      padding: 40px 0px 20px 0px;
      margin: 0 24px;
      background: #1D1774;
    }
    .flex_between {
      display: flex;
      justify-content: space-between;
    }
    .van-notice-bar {
      height: 54px;
      line-height: 54px;
      background: #F0D2BD;
      font-size: 16px;
      color: #3D1711;
      text-align: center;
    }
    .betting-success-box {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      display: block;
      overflow: hidden;
      background: rgba(0, 0, 0, .2);
      .betting-success {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 440px;
        height: 100px;
        margin-left: -220px;
        margin-top: -50px;
        background: #0C1C3B;
        border: 3px solid #EDD083;
        border-radius: 10px;
        font-family: PingFangSC-Semibold;
        font-size: 28px;
        color: #FFFFFF;
        line-height: 100px;
        text-align: center;
        -webkit-transition: all .5s ease-in;
        -moz-transition: all .5s ease-in;
        transition: all .5s ease-in;
        opacity: 0.001;
      }
      .baiwan-ease-in {
        opacity: 1;
      }
    }
    @keyframes mymove1 {
      from {
        top: 0px;
        transform: scale(.9)
      }
      to {
        top: 396px;
        transform: scale(2)
      }
    }
    @keyframes mymove2 {
      from {
        top: 100px;;
        transform: scale(.7)
      }
      to {
        top: 396px;
        transform: scale(1.3)
      }
    }
    @keyframes mymove3 {
      from {
        top: 230px;
      }
      to {
        top: 396px;
      }
    }
  }
</style>
